/**
 * Created by Moudi on 2017/2/25.
 */
@import "reset";
// 变量区
@import "var";
// keyframes
@import "animation";
// 额外碎片的代码
@import "extraPieces";
// 过程动画
@import "state-animation";
// shadow
@import "shadow";
// loading 页面
@import "loader";
// 加载nav
@import "nav";
// smash 界面
@import "smash";
// overlay 界面
@import "overlay";
// animal-nav
@import "animal-nav";
// @media
@import "media";


@font-face {
  font-family: 'BlocExtCond';
  src: url("../fonts/blocextcond.eot");
  src: url("../fonts/blocextcond.eot?#iefix") format("embedded-opentype"), url("../fonts/blocextcond.woff") format("woff"), url("../fonts/blocextcond.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
::selection {
  background: #f03252;
}
::-webkit-scrollbar-thumb {
  background: #f03252;
  border: 3px solid #232323;
  border-radius: 20px;
}
::-webkit-scrollbar {
  height: 12px;
  width: 9px;
  background: transparent;
  border-radius: 20px;
}
.overlay::-webkit-scrollbar-thumb {
  background: #ddd;
  border: 8px solid rgba(255, 255, 255, 0.945);
  border-radius: 20px;
}
body,
html {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .5s;
  background: map-get($bg, startup);
  font-family: 'BlocExtCond', "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
}
a, p, h1, h2, h3, h4, h5 {
  color: #fff;
  text-decoration: none;
  font-family: 'BlocExtCond', "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0;
  font-size: 1.05em;
}
i {
  display: inline-block;
}
@each $color-name, $color in $bg {
  body.#{$color-name} {
    background-color: $color;
    .popout {
      color: $color;
    }
    .nav .muted .mute span {
      border-color: $color;
    }
    .nav-btn::after {
      background-color: $color;
    }
    .animal-nav .why span {
      color: $color;
    }
    .animal-info li:nth-child(3) .direct-stats span {
      border-color: $color;
    }
    .wallpaper span {
      border-color: $color;
      &::before {
        border-color: $color;
      }
      &::after {
        border-color: $color;
      }
    }
    .overlay h2, .overlay p span, .overlay a {
      color: $color;
    }
  }
}

body.preloader,
body.preAni {
  #show-stage {
    background: transparent;
  }
}

#show-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 650px;
  max-height: 430px;
  transition: 2s;
  transform: translateY(-15%);
  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .pieces {
    width: 100%;
    height: 100%;
    transition-duration: 0.9s;
    transition-timing-function: cubic-bezier(0.37, -0.29, 0, 1.29); //cubic-bezier(0.62, 0.02, 0.34, 1)
  }
}
.animation-lock {
  &.butterfly #show-stage,
  &.damselfly #show-stage {
    animation: fly 3s infinite;
  }
  &.vaquita #show-stage  {
    animation: fish-l 8s infinite;
  }
  &.turtle #show-stage,
  &.parrotfish #show-stage {
    animation: fish-r 8s infinite;
  }
}
.small-nav {
  .animation-lock {
    &.butterfly #show-stage,
    &.damselfly #show-stage {
      animation: fly-noy 3s infinite;
    }
    &.vaquita #show-stage  {
      animation: fish-l-noy 8s infinite;
    }
    &.turtle #show-stage,
    &.parrotfish #show-stage {
      animation: fish-r-noy 8s infinite;
    }
  }
}

body #show-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 600px;
  height: 600px;
  margin-left: -300px;
  margin-top: -300px;
  opacity: 0;
  transition: 0.23s;
  -webkit-backface-visibility: hidden;
  background: url() no-repeat center center;
  pointer-events: none;
}
.animation-lock #show-stage::before {
  opacity: .34;
}

.wrapper {
  z-index: 2;
}

.extra {
  z-index: 1;
  .pieces {
    -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
}

.shadow {
  position: absolute;
  bottom: 10%;
  left: 30%;
  background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0.14) 35%, transparent 100%);
  width: 50%;
  height: 5%;
  transition: .6s cubic-bezier(1, 0.3, 0.3, 1) .6s;
  opacity: 0;
  &::before, &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.38) 0, rgba(0, 0, 0, 0.185) 35%, transparent 100%);
    transition: .6s cubic-bezier(1, 0.3, 0.3, 1) .6s;
  }
  &::before {
    left: 30%
  }
  &::after {
    left: -37%;
    height: 60%;
    bottom: 20%;
  }
}

//遍历所有动物的形状及基础颜色
@each $name, $p in $path {
  @for $i from 1 through 30 {
    body.#{$name} {
      .shadow {
        opacity: 1;
      }
      .wrapper:nth-of-type(#{$i}) .pieces {
        -webkit-clip-path: polygon(nth(map_get($path, $name), $i));
        clip-path: polygon(nth(map_get($path, $name), $i));
        background-color: nth(map_get($color, $name), $i);
        transition-delay: $i * 0.04s;
      }
    }
  }
}